<template>
	<div>
		<scroll class="searchjianyi2" v-if='searchlist' ref="searchlis" :data="searchlist.songs">
			<div>
				<div class="listtit">单曲</div>
				<div v-for="(i,index) in searchlist.songs" class="listcont" @click="played(index)">
					<span>{{i.name}}</span>
					<div v-for="item in i.artists">
						{{item.name}}
					</div>

				</div>

				<div v-if='searchlist.albums'>
					<div class="listtit">专辑</div>
					<div v-for="i in searchlist.albums" class="listcont">

						<img :src="i.artist.img1v1Url" width="45" /> 
						<span>{{i.name}} {{i.artist.name}}</span>
						

					</div>
				</div>

				<div v-if='searchlist.mvs'>
					<div class="listtit">MV</div>
					<div v-for="i in searchlist.mvs" class="listcont">
						<img :src="i.cover" width="45" />
						<span>{{i.name}}</span>
						

					</div>
				</div>

				<div v-if='searchlist.artists'>
					<div class="listtit">艺术家</div>
					<div v-for="i in searchlist.artists" class="listcont">
						<img :src="i.picUrl" width="45" /> 
						<span>{{i.name}}</span>
						

					</div>
				</div>
			</div>
		</scroll>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Scroll from './scroll'
	export default {

		
		computed: {
			...mapGetters([
				'searchlist',
				
			])
		},
	
		
		components: {
			Scroll
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

	
	.searchjianyi2 {
		position: fixed;
		top: 6vh;
		width: 100%;
		z-index:799;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.5);
		height: 94vh;
		.listtit {
			width: 100%;
			background: rgba(255, 255, 255, 0.3);
			color: #fff;
			font-size: 14px;
			padding: 5PX 5PX;
		}
		.listcont {
			color: #32D6EE;
			border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
			padding: 20px;
			span {
				color: #32D6EE;
				display:inline-block
			}
			div {
				color: #fff;
				font-size: 12px;
			}
		}
	}
</style>